<template>
  <div id="app">
    <span style="font-size: 13px;">
      请选择翻译为什么语言：
    </span>
    <el-switch
      v-model="language"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="中文"
      inactive-text="英文">
    </el-switch>
    <el-button type="primary" @click="trans">翻译</el-button>
    <div style="height: 10px;"></div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <el-input
            type="textarea"
            autosize
            :rows="5"
            placeholder="请输入内容"
            v-model="translate">
          </el-input>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <el-input
            type="textarea"
            autosize
            :rows="2"
            v-model="translateResult">
          </el-input>
        </el-card>
      </el-col>
    </el-row>
    <div style="height: 10px;"></div>
    <el-row>
      <el-col :span="24">
        <el-card style="line-height: 26px;">
          <p>
            1、请先选择翻译成中文还是英文。
          </p>
          <p>
            2、如果是中文则会自动将左边的内容翻译成中文。
          </p>
          <p>
            3、如果是英文则会将左边的内容翻译成英文。
          </p>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'enumTool',
    data: function() {
      return{
        translate: '',
        translateResult: '',
        language: true
      }
    },
    methods: {
      async trans() {
        let query = {
          trans: this.translate,
          model: this.language ? 1 : 2
        }
        let res = await this.$http.post('/api/tool/translate', query)
        console.log(res.data)
        this.translateResult = res.data
      }
    }
  }
</script>

<style>
  /* CSS */
</style>